<template>
	<view class="Global">
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav class="Content" :title="title" bgColor="" :backIcon="isback"></MyNav>



		<scroll-view scroll-y="true" :style="'height:'+scrollViewHeight+'px'"> 
		<view class="content">
		
			<view class="contentItem" v-for="(item,index) in listData" @click="clickItem()">
		
				<view class="contentItemInnerLeft">
					<view class="contentItemLeft">
						<image src="/static/xitong_xiaoxi.png" class="contentItemLeftImg" mode="widthFix"></image>
		
					</view>
					<text class="contentItemLeftText"></text>
				</view>
		
		
				<view class="contentItemInnerRight">
		
					<view class="contentItemInnerRightTop">
						<text class="contentItemInnerRightTopLeft">{{item.title}}</text>
						<text class="contentItemInnerRightTopRight">09::21</text>
					</view>
		
					<view class="contentItemInnerRightBottom">
						<text
							class="contentItemInnerRightBottomText">恭喜又到了每月最开心的日子，您本月出勤天数恭喜又到了每月最开心的日子，您本月出勤天数...</text>
					</view>
		
				</view>
		
		
			</view>
		 
		</view>
		
		
		</scroll-view>
	
	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'

	export default {
		components: {
			MyNav,
			bgImage
		},
		data() {
			return {
				login: '确定发送',

				title: '消息',

				isback: true,
				
				
				listData:[
					{
						title:'录入成功'
					},
					{
						title:'录入成功'
					},
					{
						title:'录入成功'
					},
					{
						title:'录入成功'
					},
					{
						title:'录入成功'
					},
					{
						title:'录入成功'
					},
					{
						title:'录入成功'
					},
					{
						title:'录入成功'
					},
					{
						title:'录入成功'
					},
					{
						title:'录入成功'
					},
					{
						title:'录入成功'
					},
					{
						title:'录入成功'
					}
				],
				
scrollViewHeight:0,

			}
		},
		onLoad() {
			// 在其他页面或组件中访问
			const app = getApp();
			this.scrollViewHeight = app.globalData.scrollViewHeight2
		},
		methods: {

			// 单击消息列表
			clickItem(){
				uni.navigateTo({
					url: '/pages/notification/notificationDetail/notificationDetail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss">

	.contentItemInnerRightBottomText {


		width: 100%;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;


		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 1;
		/*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden;
		/*溢出隐藏*/


	}

	.contentItemInnerRightBottom {
		display: flex;
		width: 100%;
		margin-top: 10rpx;
	}

	.contentItemInnerRightTopRight {
		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;

	}

	.contentItemInnerRightTopLeft {
		display: flex;
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;

	}

	.contentItemInnerRightTop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.contentItemInnerRight {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 550rpx;
		margin-left: 20rpx;
	}

	.contentItemInnerLeft {
		display: flex;
		position: relative;
		width: 80rpx;
		height: 80rpx;
		background: #ECF5FD;
		border-radius: 50%;
		margin-left: 30rpx;

		.contentItemLeftText {
			width: 20rpx;
			height: 20rpx;
			background: #F55F4E;
			border-radius: 50%;
			position: absolute;
			top: 0rpx;
			right: 0rpx;

		}

		.contentItemLeft {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;



			.contentItemLeftImg {
				width: 34rpx;
				height: 40rpx;
			}




		}
	}





	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 30rpx;
	}

	.contentItem {
		width: 690rpx;
		height: 140rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}
</style>